<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <title>歌词展示</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <ript>
        var a = GetRequest();


        var id = a['id'];


        function GetRequest() {
            var url = location.search; //获取url中"?"符后的字串
            var theRequest = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = decodeURIComponent(strs[i].split("=")[1]);
                }
            }
            return theRequest;
        }

        $.ajax({
            type: "get",
            url: `/dev/song/bofang/${id}`,
            success: function(result) {
                //JSON格式的字符串，反序列化成一个JavaScript对象
                var lrc = JSON.parse(result);
                //获取歌词部分
                createLrcObj(lrc);
                //展示歌词
                showLRC();
            }
        });

        var oLRC = {
            offset: 0, //时间补偿值，单位毫秒，用于调整歌词整体位置
            ms: [] //歌词数组{t:时间,c:歌词}
        };

        function createLrcObj(lrc) {
            var lrc = lrc.data.lrclist; //获取到歌词集合部分
            //console.log(lrc);
            for(var k in lrc) { //遍历packJson 对象的每个key/value对,k为key
                //console.log(lrc[k].lineLyric +" "+lrc[k].time )
                oLRC.ms.push({
                    t: lrc[k].time,
                    c: lrc[k].lineLyric
                });
            }
            //console.log(oLRC);
        }

        function showLRC() {
            var s = "";
            for(var i in oLRC.ms) { //遍历ms数组，把歌词加入列表
                s += '<li>' + oLRC.ms[i].c + '</li>';
            }
            document.getElementById("lyric").innerHTML = s;
        }
    </ript>
    <style>
        /*歌词样式*/

        .lyric_area {
            /*歌词区域高度*/
            height: 150px;
            /*隐藏超出部分*/
            overflow: hidden;
            margin-top: 15px;
            text-align: center;
        }
        /*歌词列表*/

        #lyric {
            /*行高，这个值要用在歌词滚动距离上*/
            line-height: 20px;
            /*滚动速度*/
            transition-duration: 600ms;
        }

        #lyric .lineHigh {
            /*高亮行*/
            color: #17e883;
        }

        #lyric li {
            list-style-type: none;
            /* 去除实心圆 */
        }
    </style>
</head>

<body>
<div class="lyric_area">
    <!-- 歌词 -->
    <ul id="lyric"></ul>
</div>
<!-- 音频 -->
<audio id="bfq" src="/dev/views/cxy/music/不潮不用花钱.mp3" controls preload="auto" style="position: fixed;left: 42%;top: 22%;" /><br/>

</body>
<script>
    /* 播放音乐时让当前行高亮显示并向上滚动 */
    var lineNo = 0; //当前行
    var C_pos = 3; //C位
    var offset = -20; //滚动距离（应等于行高）
    var audio = document.getElementById("bfq"); //播放器
    var ul = document.getElementById("lyric"); //歌词容器列表

    //高亮显示歌词当前行及文字滚动控制，行号为lineNo
    function lineHigh() {
        var lis = ul.getElementsByTagName("li"); //歌词数组
        if(lineNo > 0) {
            lis[lineNo - 1].removeAttribute("class"); //去掉上一行的高亮样式
        }
        lis[lineNo].className = "lineHigh"; //高亮显示当前行

        //文字滚动
        if(lineNo > C_pos) {
            ul.style.transform = "translateY(" + (lineNo - C_pos) * offset + "px)"; //整体向上滚动一行高度
        }
    }

    //滚回到开头，用于播放结束时
    function goback() {
        document.querySelector("#lyric .lineHigh").removeAttribute("class");
        ul.style.transform = "translateY(0)";
        lineNo = 0;
    }

    //监听播放器的timeupdate事件，实现文字与音频播放同步(正常播放 )
    audio.ontimeupdate = function() {
        if(lineNo == oLRC.ms.length)
            return;
        var curTime = audio.currentTime; //播放器时间
        if(parseFloat(oLRC.ms[lineNo].t) <= curTime) {
            lineHigh(); //高亮当前行
            lineNo++;
        }
    };

    //跳跃播放时，歌词回滚到对应位置
    audio.onseeked = function() {
        var curTime = audio.currentTime; //播放器时间
        for(i = 0; i < oLRC.ms.length; i++) {
            if(oLRC.ms[i].t <= curTime) { /*播放器往回拖*/
                if(i == oLRC.ms.length - 1) { //歌词已经播放完，只剩音乐，直接跳到最后一句歌词
                    lineNo = i; //需要高亮的行
                    break;
                }
                if(oLRC.ms[i + 1].t < curTime) { //如果前一个时间也小于播放器时间，就继续循环
                    continue;
                } else {
                    if(i < C_pos * 2) { //当前行，小于最初展示的数据，直接跳到展示到开头
                        ul.style.transform = "translateY(0)";
                    }
                    lineNo = i; //需要高亮的行
                    break;
                }
                /*播放器往前拖*/
            } else {
                lineNo = i; //需要高亮的行
                break;
            }
        }
        document.querySelector("#lyric .lineHigh").removeAttribute("class"); //消除之前的高亮
        lineHigh(); //高亮当前行
    };

    //监听播放器的ended事件，播放结束时回滚歌词
    audio.onended = function() {
        goback(); //回滚歌词
    };
</script>

</html>